<template>
  <div class="state">
    订单详情---展示
    <!-- 选项卡结构 -->
    <el-tabs type="border-card" v-model="activeTab">
      <el-tab-pane label="全部" name="全部">
        <el-form :model="list">
          <el-form-item label="订单搜索" style="width: 200px">
            <el-input v-model="search" placeholder="请输入订单编号" type="text">
            </el-input>
          </el-form-item>
          <el-form-item label="产品全称" style="width: 200px">
            <el-input v-model="list.pet" placeholder="请输入产品全称" />
          </el-form-item>
          <el-form-item label="订单时间">
          <el-date-picker
      v-model="value1"
      type="daterange"
      range-separator="至"
      start-placeholder="Start date"
      end-placeholder="End date"
      value-format="YYYY-MM-DD"
    />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="editUserVisible = true" style="width: 100px;">
              查询
            </el-button>
          </el-form-item>
          <el-form-item class="btn">
            <el-button :icon="Download" class="100px" />
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <!-- 代付款 -->
      <el-tab-pane label="待付款">
        <el-form :model="list" style="width: 100%" >
          <el-form-item label="订单搜索" style="width: 200px">
            <el-input v-model="list.id" placeholder="请输入订单编号" type="text">
            </el-input>
          </el-form-item>
          <el-form-item label="产品全称" style="width: 200px">
            <el-input v-model="list.pet" placeholder="请输入产品全称" />
          </el-form-item>
          <el-form-item label="订单时间">
            <el-date-picker
      v-model="value1"
      type="daterange"
      range-separator="至"
      start-placeholder="Start date"
      end-placeholder="End date"
      value-format="YYYY-MM-DD"
    />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="editUserVisible = true" style="width: 100px;">
              查询
            </el-button>
          </el-form-item>
          <el-form-item class="btn">
            <el-button :icon="Download" class="100px" />
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <!-- 代发货 -->
      <el-tab-pane label="待发货">
        <el-form :model="list" style="width: 100%">
          <el-form-item label="订单搜索" style="width: 200px">
            <el-input v-model="list.id" placeholder="请输入订单编号" type="text">
            </el-input>
          </el-form-item>
          <el-form-item label="产品全称" style="width: 200px">
            <el-input v-model="list.pet" placeholder="请输入产品全称" />
          </el-form-item>
          <el-form-item label="订单时间">
            <el-date-picker
      v-model="value1"
      type="daterange"
      range-separator="至"
      start-placeholder="Start date"
      end-placeholder="End date"
      value-format="YYYY-MM-DD"
    />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="editUserVisible = true" style="width: 100px;">
              查询
            </el-button>
          </el-form-item>
          <el-form-item class="btn">
            <el-button :icon="Download" class="100px" />
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <!-- 待收货 -->
      <el-tab-pane label="待收货">
        <el-form :model="list" style="width: 100%">
          <el-form-item label="订单搜索" style="width: 200px">
            <el-input v-model="list.id" placeholder="请输入订单编号" type="text">
            </el-input>
          </el-form-item>
          <el-form-item label="产品全称" style="width: 200px">
            <el-input v-model="list.pet" placeholder="请输入产品全称" />
          </el-form-item>
          <el-form-item label="订单时间">
            <el-date-picker
      v-model="value1"
      type="daterange"
      range-separator="至"
      start-placeholder="Start date"
      end-placeholder="End date"
      value-format="YYYY-MM-DD"
    />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="editUserVisible = true" style="width: 100px;">
              查询
            </el-button>
          </el-form-item>
          <el-form-item class="btn">
            <el-button :icon="Download" class="100px" />
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <!-- 已完成 -->
      <el-tab-pane label="已完成">
        <el-form :model="list" style="width: 100%">
          <el-form-item label="订单搜索" style="width: 200px">
            <el-input v-model="list.id" placeholder="请输入订单编号" type="text">
            </el-input>
          </el-form-item>
          <el-form-item label="产品全称" style="width: 200px">
            <el-input v-model="list.pet" placeholder="请输入产品全称" />
          </el-form-item>
          <el-form-item label="订单时间">
            <el-date-picker
      v-model="value1"
      type="daterange"
      range-separator="至"
      start-placeholder="Start date"
      end-placeholder="End date"
      value-format="YYYY-MM-DD"
    />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="editUserVisible = true" style="width: 100px;">
              查询
            </el-button>
          </el-form-item>
          <el-form-item class="btn">
            <el-button :icon="Download" class="100px" />
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>

    <!-- table -->
    <el-table :data="filterTableData" style="width: 100%;">
      <el-table-column type="index" label="序号" width="80" />
      <el-table-column label="ID" prop="id" />
      <el-table-column label="用户id" prop="userId" />
      <el-table-column label="商品id" prop="productId" />
      <el-table-column label="订单编号" prop="orderNo" />
      <el-table-column label="订单状态" prop="status" />
      <el-table-column label="家具类别" prop="itemInfo" />
      <el-table-column label="购买数量" prop="itemCount" />
      <el-table-column label="商品单价" prop="sigPrice" />
      <el-table-column label="价格" prop="itemPrice" />
      <el-table-column label="快递公司" prop="notes" />
      <el-table-column label="地址" prop="address" />
      <el-table-column label="下单时间" prop="orderCreateTime" />
      <el-table-column fixed="right" label="操作" width="200">
        <template #default="scope">
          <el-button type="danger" size="small" @click="handleDelete(scope.row)">删除订单</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 删除确认框 -->
    <el-dialog v-model="dialogVisible" title="提示" width="30%">
      <span>确认删除</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handrevess">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script lang= "ts" setup>
import { reactive, ref, computed } from 'vue'
import { Download } from '@element-plus/icons-vue'
import{ getState } from '../../api/state'

// 订单状态数据
const loadState = async () => {
  const result: any = await getState()
  tableData.value = result
  console.log(result)
}
loadState()
//定义表格搜索栏
const editUserVisible = ref()
const dialogVisible = ref(false) // 删除
// 查询
const search = ref('')

interface tableData {
    id: number
    address: null | string
    itemCount: number
    itemInfo: string
    itemPrice: number
    notes: string
    orderCreateTime: string
    orderNo: string
    productId: number
    sigPrice: null
    status: number
    userId: number
}

const tableData = ref([
{
  id: 62,
  userId: 27,
  productId: 66,
  orderNo: "sit exercitation in in",
  status: 97,
  itemInfo: "eiusmod deserunt exercitation",
  itemCount: 58,
  sigPrice: null,
  itemPrice: 56,
  notes: "deserunt",
  address: "上海滨州市青县",
  orderCreateTime: "1975-09-28 09:16:34"
}
])

const value1 = ref('')
const list = reactive({
  id: '',
  pet: '',
  price: '',
})

// 定义选项卡激活的索引值
const activeTab = ref('全部');

// 使用计算属性根据选项卡激活的索引值过滤订单数据
const filterTableData = computed(() => {
      if (activeTab.value === '全部') {
        return tableData.value;
      } else {
        return tableData.value.filter((item: any) => item.status === activeTab.value);
      }
    });

// 创建计算属性，根据activeTab过滤表格数据
// const filterTableData = computed(() => {
//       if (state.activeTab === '全部') {
//         return state.tableData;
//       }
//       // const status = state.tabLabels.findIndex((label: any) => label === state.activeTab
//       // );
//       return state.tableData.filter((item: any) => item.dstatus === status);
//     });
// 删除
const delateId = ref('1234')
const handleDelete = (row: any) => {
  console.log('删除');
  delateId.value = row.id;
  dialogVisible.value = true;
}
// 删除逻辑
const handrevess = () => {
  tableData.value = tableData.value.filter((item: any) => item.id !== delateId.value)
  console.log(tableData.value);


  dialogVisible.value = false;

}
</script>

<style lang= "less" scoped>
.el-form {
  display: flex;
  justify-content: space-around;
}
</style>
